<template>
  <div class="demo full-page">
  <h2>滚动定位页面</h2>
  <input type="range" min="0" max="1000" v-model="pinPadding">
  <p v-direct:[direction]="pinPadding">页面被定位到离本页{{direction}}端{{pinPadding}}像素</p>
</div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
           direction: 'right',
           pinPadding: 200
        })
    
        return {
            ...toRefs(state)
        }
    }
}
</script>
